<template>
  <b-container>
    <b-row class="my-4 justify-content-center my-md-5">
      <b-col class="mt-4 mt-md-5 form-border" cols="10" sm="8" md="6" lg="4">
        <h2 class="text-center my-3 font-weight-bold">用户登录</h2>
        <b-form class="font-weight-bold mb-3">
          <b-form-group
              id="input-username"
              label="账号:"
              label-for="input-1"
          >
            <b-form-input
                id="input-1"
                v-model="form.username"
                type="text"
                :state="status.username_state"
                required
                placeholder="请输入账号"
                @blur="validUsername"
            ></b-form-input>
            <b-form-invalid-feedback id="input-1-feedback" v-text="warn.username_warn">
              errr
            </b-form-invalid-feedback>

          </b-form-group>
          <b-form-group
              id="input-password"
              label="密码:"
              label-for="input-3"
          >
            <b-form-input
                id="input-3"
                v-model="form.password"
                type="password"
                required
                :state="status.password_state"
                placeholder="请输入密码"
                @blur="validPassword"
            ></b-form-input>
            <b-form-invalid-feedback id="input-3-feedback" v-text="warn.password_warn">
              errorhere
            </b-form-invalid-feedback>
          </b-form-group>
          <b-form-checkbox
              v-model="isChecked"
              value="true"
              unchecked-value="false"
              class="mb-3"
          >
            7天内免登录
          </b-form-checkbox>
          <b-col class="text-center">
            <b-btn variant="info" class="justify-self-center bg-theme border-0 ml-auto mr-2" @click="OnSubmit"
                   v-if="!isProcessing"> 登录
            </b-btn>
            <b-btn variant="info" class="justify-self-center bg-theme border-0 ml-auto mr-2" disabled v-else>
              处理中
              <b-spinner variant="light" small class=""/>
            </b-btn>
            <b-btn variant="danger" class="justify-self-center border-0 mr-auto ml-2" @click="OnReset"> 重置</b-btn>
          </b-col>
        </b-form>
      </b-col>
    </b-row>
    <b-row class="justify-content-center">
      <b-col cols="10" sm="8" md="6" lg="4">
        <b-alert
            variant="danger"
            dismissible
            fade
            :show="hasWarn"
            @dismissed="hasWarn=false"

        >
          {{warnmsg}}
        </b-alert>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        status: {
          username_state: null,
          password_state: null
        },
        warn: {
          username_warn: '',
          password_warn: ''
        },
        isProcessing: false,
        isChecked: false,
        hasWarn: false,
        warnmsg: 'sdrfg'
      }
    },
    methods: {
      validUsername(){
        if (this.form.username === ''){
          this.status.username_state = false
          this.warn.username_warn = '账号不得为空'
        }else{
          this.status.username_state = true
        }
      },
      validPassword(){
        if (this.form.password === ''){
          this.status.password_state = false
          this.warn.password_warn = '密码不得为空'
        }else{
          this.status.password_state = true
        }
      },

      OnReset() {
        this.form.username = ''
        this.form.password = ''
        this.status.password_state = null;
        this.status.username_state = null;
        this.isChecked = false;
      },
      OnSubmit() {
        this.validUsername()
        this.validPassword()
        if (this.status.password_state && this.status.username_state){
          this.isProcessing = true;
          let data = {
            username: this.$ajax.encode(this.form.username),
            password: this.$ajax.encode(this.form.password)
          }
          this.$ajax.post('/user/login', data)
            .then((resp) => {
              let data = resp.data
              if (data.code === 200) {
                this.$store.commit('init', data.data)
                this.$store.commit('setRemember', this.isChecked)
                this.isProcessing = false
                this.$ajax.updateAuth()
                this.$router.replace('/')
                console.log(data.msg);
              } else {
                this.warnmsg = data.msg
                this.hasWarn = true
                this.isProcessing = false
              }
            }).catch(err => {
            this.warnmsg = '请求错误'
            this.hasWarn = true
            this.isProcessing = false
          })
        }

      },

    },
    beforeMount() {

      if (!this.$store.getters.hasLogin) {
        this.$store.commit("getCachedToken")
        this.$ajax.updateAuth()
        this.$ajax.post('/user/flush', {}).then((resp) => {
          let data = resp.data
          if (data.code === 200) {
            this.$store.commit("init", data.data)
            console.log("flush success")
            if (this.$route.query.redirect){
              this.$router.push(this.$route.query.redirect)
            }else{
              this.$router.push('/')
            }
          } else {
            // 401 will be quit
            this.$store.commit("quit")
          }
        })

      }
    }
  }
</script>

<style scoped>
  .form-border {
    border: #b8b8b8 1px solid;
    border-radius: 5px;
  }
</style>